<template>
  <div class="editor">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-button icon="el-icon-edit" size="small" style="position: absolute;left:40.5% ;top: 5px;z-index: 1;" type="primary"
                   @click="submitForm">保存
        </el-button>
        <el-button icon="el-icon-view" size="small" style="position: absolute;left:44.5% ;top: 5px;z-index: 1;" type="success"
                   @click="runCode">预览
        </el-button>
        <el-tabs class="left-content" type="border-card">
          <el-tab-pane label="Template">
            <MonacoEditor ref="html" height="83vh" language="html" width="100%"></MonacoEditor>
          </el-tab-pane>
          <el-tab-pane label="CSS">
            <MonacoEditor ref="css" height="83vh" language="css" width="100%"></MonacoEditor>
          </el-tab-pane>
          <el-tab-pane label="Script">
            <MonacoEditor ref="script" height="83vh" language="javascript" width="100%"></MonacoEditor>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        <el-tabs type="border-card">
          <el-tab-pane label="预览">
            <div id="viewPanel" ref="viewPanel" class="right-content"></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {uuid} from "@jiaminghi/data-view/lib/util";
import Vue from 'vue'
import {toPng} from 'html-to-image'
import MonacoEditor from '@/views/zutai/components/monacoEditor'
import {getBVueComponent, updateBVueComponent, saveComponentImage} from "@/views/zutai/api/zutai/bVueComponent";

export default {
  name: "app",
  components: {
    MonacoEditor
  },
  data() {
    return {
      form: {},
      isSaveAuth: false,
      program: null,
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  beforeDestroy() {
    this.reset();
  },
  methods: {
    runCode() {
      this.reset();
      var html = this.$refs.html.monacoEditor.getValue();
      var css = this.$refs.css.monacoEditor.getValue();
      var script = this.$refs.script.monacoEditor.getValue();

      //拼接到现有的docment元素中
      if (!html || !script) {
        this.$message.error('请输入有效的Vue代码');
        return;
      }
      let js = script.replace(/export default/, 'return ')
      const common = new Function(js)()
      common.template = html
      const Template = Vue.extend(common)
      this.program = new Template()
      this.$refs.viewPanel.appendChild(this.program.$mount().$el)
      if (css) {
        const styles = document.createElement('style')
        styles.type = 'text/css'
        styles.id = uuid()
        styles.innerHTML = css
        this.$refs.viewPanel.appendChild(styles)
      }

      // const Template = Vue.extend(common);
      // const Template = Vue.extend({template: html,})
      // 创建实例
      // const instance = new Template()
      // console.log(instance)
      // instance.$mount('#viewPanel')
      // this.program = new Template();
      // console.log(this.program);
      // debugger

    },
    reset() {
      this.$refs.viewPanel.innerHTML = ''
      if (this.program) {
        this.program.$destroy()
      }
      this.program = null
    },
    getDetail() {
      getBVueComponent(this.$route.query.id).then(response => {
        this.form = response.data;
        /*if (this.form.deptIdStrs.indexOf(this.$store.getters.deptId) > -1) {
            this.isSaveAuth = true;
        } else {
            this.isSaveAuth = false;
        }*/
        this.$refs.html.monacoEditor.setValue(this.form.componentTemplate)
        this.$refs.css.monacoEditor.setValue(this.form.componentStyle)
        this.$refs.script.monacoEditor.setValue(this.form.componentScript)
        this.runCode();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.id = this.$route.query.id;
      this.form.componentTemplate = this.$refs.html.monacoEditor.getValue();
      this.form.componentStyle = this.$refs.css.monacoEditor.getValue();
      this.form.componentScript = this.$refs.script.monacoEditor.getValue();
      updateBVueComponent(this.form).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.htmlToImage();
      });
    },
    htmlToImage() {
      toPng(this.$refs.viewPanel)
          .then(dataUrl => {
            //保存缩率图
            this.form.base64 = dataUrl;
            saveComponentImage(this.form);
          })
          .catch(error => {
            console.error('oops, something went wrong!', error)
          })
    },
  },
};
</script>

<style scoped>
.editor {
  padding: 10px;
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 90vh;
  position: relative;
}

.left-content {
  width: 100%;
  height: 100%;
}

.right-content {
  padding: 10px;
  width: 100%;
  height: 90vh;
}

.right-content p {
  margin: 5px 0;
}
</style>
